<template>
	<view>
		<barHeight></barHeight>
		<swiperSearch :topList="mainSlide" name="news"></swiperSearch>
		<view class="tab-bg">
			<scroll-view scroll-x="true">
				<view class="tab">
					<view :class="index===index1?'lan':'hei'" class="content" @click="tab(index1,item.id)"
						v-for="(item,index1) in newsList">
						<image src="/static/news/hot_icon.png" v-if="index1 === 0"></image>
						<image src="/static/news/dager_icon.png" v-if="index1 === 1"></image>
						<text>{{item.name}}</text>
						<view class="xian" v-if="index===index1"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<zero-back-top :scrollTop="scrollTop"></zero-back-top>
		<orange-fullloading v-if="isshow" text="loding..."></orange-fullloading>
		<view class="">
			<newslist :list="infoList"></newslist>
		</view>
	</view>
</template>

<script>
	import swiperSearch from "@/components/swiper-search.vue"
	import newslist from "@/components/newslist.vue"
	export default {
		components: {
			swiperSearch,
			newslist
		},
		data() {
			return {
				isshow: true,
				current: 0,
				index: 0,
				newsList: [],
				mainSlide: [],
				infoList: [],
				id: 11,
				scrollTop: 0,
			}
		},
		onShow() {
			this.init()
		},
		onPullDownRefresh() {
			this.init()
			this.getInfo(this.id)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			tab(e, id) {
				this.index = e
				this.id = id
				this.getInfo(id)
			},
			goToVideo(item) {
				uni.navigateTo({
					url: '/pages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			init() {
				const params = {
					map: 'applet_applet_information_category'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.newsList = res.data.data
						this.getInfo(this.newsList[0].id)
						
					} else {
						this.isshow = false
					}
				})
				const params1 = {
					map: 'applet_city_shop_page'
				}
				this.$Request({
					method: 'GET',
					data: params1
				}).then(res => {
					if (res.data.ec == 200) {
						this.mainSlide = res.data.data.mainSlide
					} else {}
				})
			},
			getInfo(id) {
				this.infoList = []
				const params = {
					categoryId: id,
					page: 0,
					map: 'applet_applet_information_list'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.infoList = res.data.data.list
						this.isshow = false
						uni.stopPullDownRefresh()
					} else {
						uni.stopPullDownRefresh()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.tab-bg {
		background-color: #ffffff;
	}

	.tab {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		.content {
			display: flex;
			justify-content: space-between;

			text {
				font-size: 24rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.lan {
			color: #2497ff;
		}

		.hei {
			color: #333333;
		}

		.xian {
			width: 84%;
			height: 6rpx;
			background-color: #2497ff;
			border-radius: 20rpx;
			position: absolute;
			bottom: 5rpx;
			left: 50%;
			transform: translate(-50%, 100%);
			border-radius: 0 0 40rpx 40rpx;
		}
	}

	.tab>view {
		position: relative;
		border: 1px solid #bfbdbe;
		padding: 10rpx 20rpx;
		border-radius: 40rpx;
		text-align: center;
		white-space: nowrap;
	}
</style>
